{% load static %}
<style>
    input {
        outline-style: none;
        border: 1px solid #ccc;
    }

    input {
        outline-style: none;
        border: 1px solid #ccc;
    }

    input:focus {
        border: 1px solid #409eff;
    }

    .form-control:focus {
        box-shadow: none;
    }

    #header .form-control {
        border-radius: 16px;
    }

    #header .btn-outline-light {
        background-color: rgba(53, 154, 255, 0.8);
    }

    #header .btn-outline-light:hover {
        background-color: rgba(53, 154, 255, 1.0);
    }

    @media (max-width: 992px) {
        #header .nav {
            width: unset;
        }

        input:focus {
            border: 1px solid #409eff;
        }

        #header .form-control {
            border-radius: 16px;
        }

        .form-control:focus {
            box-shadow: none;
        }

        @media (max-width: 992px) {
            #header .nav {
                width: unset;
            }

            #header .search {
                order: 2;
            }

            #header .text-end {
                flex-grow: 1;
            }
        }
    }
</style>
<header class="p-3 text-white" id="header">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
            <a class="navbar-brand" href="#">
                <img src="{% static 'image/Yotee.svg' %}" alt="logo" style="width:120px;">
            </a>

            <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
                <li><a href="#" class="nav-link px-2 text-dark">主页</a></li>
                <li><a href="#" class="nav-link px-2 text-dark">工具</a></li>
                <li><a href="#" class="nav-link px-2 text-dark">社区</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
                        更多
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">链接1</a>
                        <a class="dropdown-item" href="#">链接2</a>
                        <a class="dropdown-item" href="#">链接3</a>
                    </div>
                </li>

            </ul>

            <form class="search col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
                <input type="search" class="form-control form-control-dark" placeholder="Search..." aria-label="Search">
            </form>
            {% if is_login %}
                <div class="text-end flex-shrink-0 dropdown">
                    <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser2"
                       data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202001%2F24%2F20200124144026_fbjdt.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644829771&t=abf92e8b02557c7cba608a3cfd027f9d"
                             alt="mdo" width="40" height="40" class="rounded-circle">
                    </a>
                    <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
                        <li><a class="dropdown-item" href="#">个人设置</a></li>
                        <li><a class="dropdown-item" href="#">114514</a></li>
                        <li><a class="dropdown-item" href="#">1919810</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="/logout/">登出</a></li>
                    </ul>
                </div>
            {% else %}
                <div class="text-end flex-shrink-0">
                    <button type="button" class="btn btn-outline-light me-2 text-light"
                            onclick="window.location.href = '/login/'">
                        登录
                    </button>
                    <button type="button" class="btn btn-signup text-dark"
                            onclick="window.location.href = '/register/'">注册
                    </button>
                </div>
            {% endif %}
        </div>
    </div>
</header>